<template>
  <div style="width: 100%;">
    <ElInput :modelValue="props.modelValue" :="$attrs" style="width: 100%;" />
    <div>
      <ElButton link type="primary" @click="onHalf">二人分摊</ElButton>
      <ElButton link type="primary" @click="onHalfHalf">四人分摊</ElButton>
      <ElButton link type="primary" @click="onClear">清空</ElButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElInput, ElButton } from 'element-plus'
interface Props {
  modelValue: string;
  data: object;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  data: () =>({}),
})
const emit = defineEmits()

const onHalf = () => {
  const value = +props.modelValue / 2
  emit('update:modelValue', `${value || 0}`)
}

const onHalfHalf = () => {
  const value = +props.modelValue / 4
  emit('update:modelValue', `${value || 0}`)
}

const onClear = () => {
  emit('update:modelValue', ``)
}

</script>